<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="CSS/index.css" />
    <link rel="icon" href="favicon.ico" />
    <title>淘宝网 - 淘！我喜欢</title>
    <base target="_blank" />
</head>

<body>
    <!-- 头部信息 -->
    <div id="headMessage" class="clearfix layer">
        <ul class="fl">
            <li>
                <span>中国大陆</span>
                <span class="iconfont arrow">&#xe791;</span>
            </li>

            <li class="mr7">
                <a href="#" class="login mr7">亲，请登录</a>
                <a href="#">免费注册</a>
            </li>

            <li>
                <a href="#">手机逛淘宝</a>
            </li>
        </ul>

        <ul class="fr">
            <li>
                <a href="#">我的淘宝</a>
                <span class="iconfont arrow">&#xe791;</span>
            </li>

            <li>
                <span class="iconfont mr5 c4">&#xe6b8;</span>
                <a href="#">购物车</a>
                <strong>0</strong>
                <span class="iconfont arrow">&#xe791;</span>
            </li>

            <li>
                <a href="#"><span class="iconfont mr5 store scj">&#xe608;</span>收藏夹</a>
                <span class="iconfont arrow">&#xe791;</span>
            </li>

            <li>
                <a href="#">商品分类</a>
            </li>

            <li><span class="colorD">|</span></li>

            <li>
                <a href="#">千牛卖家中心</a>
                <span class="iconfont arrow">&#xe791;</span>
            </li>

            <li>
                <a href="#">联系客服</a>
                <span class="iconfont arrow">&#xe791;</span>
            </li>

            <li>
                <span class="iconfont mr5 c4">&#xe606;</span>
                <a href="#">网站导航</a>
                <span class="iconfont arrow">&#xe791;</span>
            </li>
        </ul>
    </div>

    <!-- 广告 -->
    <div id="headAd">
        <div class="layer clearfix">
            <a style="display: block; height: 70px;"
                href="https://market.m.taobao.com/app/miniapp-biz/taoxiaopuPc/index.html?spm=a21bo.2017.201855.1.5af911d9I1YCFx&acm=lb-zebra-634493-8608804.1003.4.8190183&scm=1003.4.lb-zebra-634493-8608804.OTHER_15917254192631_8190183">
                <img src="https://img.alicdn.com/tfs/TB1OaEjIhD1gK0jSZFsXXbldVXa-1190-70.png" alt="淘宝小铺"
                    style="width: 1190px; height: 70px;" />
            </a>
        </div>
    </div>

    <!-- 头部搜索 -->
    <div id="headSearch">
        <div class="clearfix layer">
            <!-- 左 -->
            <h1 class="fl" style="margin-top: 15px;"><a href="#">淘宝网</a></h1>

            <!-- 右 -->
            <div class="code fr">
                <span class="iconfont close">&#xe607;</span>
                <a
                    href="https://market.m.taobao.com/app/fdilab/download-page/main/index.html? spm=a21bo.2017.201858.1.5af911d9DWAa2W&acm=lb-zebra-634493-8609660.1003.4.8190782&scm=1003.4.lb-zebra-634493-8609660.OTHER_15917281779251_8190782">
                    <span class="c5">手机淘宝</span>
                    <img src=""
                        alt="">
                </a>
            </div>

            <!-- 中 -->
            <div class="search">
                <!-- 上 -->
                <ul class="searchTab clearfix">
                    <li class="acctive">宝贝</li>
                    <li>天猫</li>
                    <li>店铺</li>
                </ul>
                <!-- 中 -->
                <div class="searContent clearfix">
                    <form action="#">
                        <div class="searchBox fl">
                            <input type="text" />
                            <div class="placehorder">
                                <i class="iconfont">&#xe602;</i>
                                <span>显瘦牛仔背带裤</span>
                            </div>
                            <span class="iconfont imgSearch">&#xe698;</span>
                        </div>
                        <div class="btn fl">
                            <button type="submit">搜索</button>
                        </div>
                    </form>
                </div>
                <!-- 下 -->
                <div class="hotKey">
                    <a href="#">新款连衣裙</a>
                    <a href="#">四件套</a>
                    <a href="#" class="c5">潮流T恤</a>
                    <a href="#">时尚女鞋</a>
                    <a href="#">短裤</a>
                    <a href="#">半身裙</a>
                    <a href="#">男士外套</a>
                    <a href="#">墙纸</a>
                    <a href="#">行车记录仪</a>
                    <a href="#">新款男鞋</a>
                    <a href="#">耳机</a>
                    <a href="#">时尚女包</a>
                    <a href="#">沙发</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 导航栏 -->
    <div id="nav" class="layer clearfix">
        <h2 class="fl">主题市场</h2>
        <ul class="fl">
            <li class="size"><a href="https://www.tmall.com/">天猫</a></li>
            <li class="size"><a href="https://ju.taobao.com/">聚划算</a></li>
            <li class="size"><a href="https://chaoshi.tmall.com/">天猫超市</a></li>
            <li class="line">|</li>
            <li><a href="#">淘抢购</a></li>
            <li><a href="#">电器城</a></li>
            <li><a href="#">司法拍卖</a></li>
            <li><a href="#">淘宝心选</a></li>
            <li><a href="#">兴农脱贫</a></li>
            <li class="line">|</li>
            <li><a href="#">飞猪旅行</a></li>
            <li><a href="#">智能生活</a></li>
            <li><a href="#">苏宁易购</a></li>
        </ul>
    </div>

    <!-- 首屏内容 -->
    <div id="firstScreen" class="layer clearfix">
        <!-- 左边的内容 -->
        <div class="firstLeft fl">
            <!-- 侧边导航 -->
            <div class="sideNav fl">

                <ul>
                    <li>
                        <a href="#">女装</a>
                        /
                        <a href="#">内衣</a>
                        /
                        <a href="#">家居</a><span class="iconfont fr">&#xe65f;</span>
                    </li>
                    <li>
                        <a href="#">女鞋</a>
                        /
                        <a href="#">男鞋</a>
                        /
                        <a href="#">箱包</a><span class="iconfont fr">&#xe65f;</span>
                    </li>
                    <li>
                        <a href="#">母婴</a>
                        /
                        <a href="#">童装</a>
                        /
                        <a href="#">玩具</a><span class="iconfont fr">&#xe65f;</span>
                    </li>
                    <li>
                        <a href="#">男装</a>
                        /
                        <a href="#">运动户外</a><span class="iconfont fr">&#xe65f;</span>
                    </li>
                    <li>
                        <a href="#">美妆</a>
                        /
                        <a href="#">彩妆</a>
                        /
                        <a href="#">个护</a><span class="iconfont fr">&#xe65f;</span>
                    </li>
                    <li>
                        <a href="#">手机</a>
                        /
                        <a href="#">数码</a>
                        /
                        <a href="#">企业</a><span class="iconfont fr">&#xe65f;</span>
                    </li>
                    <li>
                        <a href="#">大家电</a>
                        /
                        <a href="#">生活电器</a><span class="iconfont fr">&#xe65f;</span>
                    </li>
                    <li>
                        <a href="#">零食</a>
                        /
                        <a href="#">生鲜</a>
                        /
                        <a href="#">茶酒</a><span class="iconfont fr">&#xe65f;</span>
                    </li>
                    <li>
                        <a href="#">厨具</a>
                        /
                        <a href="#">收纳</a>
                        /
                        <a href="#">清洁</a><span class="iconfont fr">&#xe65f;</span>
                    </li>
                    <li>
                        <a href="#">家纺</a>
                        /
                        <a href="#">家饰</a>
                        /
                        <a href="#">鲜花</a><span class="iconfont fr">&#xe65f;</span>
                    </li>
                    <li>
                        <a href="#">图书音像</a>
                        /
                        <a href="#">文具</a><span class="iconfont fr">&#xe65f;</span>
                    </li>
                    <li>
                        <a href="#">医药保健</a>
                        /
                        <a href="#">进口</a><span class="iconfont fr">&#xe65f;</span>
                    </li>
                    <li>
                        <a href="#">汽车</a>
                        /
                        <a href="#">二手车</a>
                        /
                        <a href="#">用品</a><span class="iconfont fr">&#xe65f;</span>
                    </li>
                    <li>
                        <a href="#">装修</a>
                        /
                        <a href="#">建材</a>
                        /
                        <a href="#">家具</a><span class="iconfont fr">&#xe65f;</span>
                    </li>
                    <li>
                        <a href="#">手表</a>
                        /
                        <a href="#">眼镜</a>
                        /
                        <a href="#">珠宝饰品</a><span class="iconfont fr">&#xe65f;</span>
                    </li>
                </ul>
            </div>

            <div class="img1Box fr">
                <div class="pic fl">
                    <div class="img">
                        <a href="#">
                            <img src="https://img.alicdn.com/tfs/TB1oQefPBr0gK0jSZFnXXbRRXXa-520-280.jpg_q90_.webp"
                                alt="">
                        </a>
                    </div>
                    <button class="iconfont leftBtn">&#xe65c;</button>
                    <button class="iconfont rightBtn">&#xe65f;</button>

                    <div class="circle">
                        <span class="active"></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <div class="ad fr">
                    <a href="#">
                        <img src="https://img.alicdn.com/imgextra/i3/2838892713/O1CN01Cfgot31Vub8nHmyom_!!2838892713.jpg_400x400q90.jpg_.webp"
                            alt="">
                    </a>
                </div>
            </div>
            <div class="img2Box fr">
                <div class="pic fl">
                    <div class="picTitle">
                        <div class="text clearfix">
                            <span class="fl bg">理想生活上天猫</span>
                            <span class="fr"><i>1</i>/6</span>
                        </div>
                        <div class="line">
                            <span></span>
                        </div>
                    </div>
                    <div class="img">
                        <a href="#">
                            <img src="https://aecpm.alicdn.com/simba/img/TB1X6uHLVXXXXcCXVXXSutbFXXX.jpg" alt="">
                        </a>
                        <a href="#">
                            <img src="https://aecpm.alicdn.com/simba/img/TB13xKuLVXXXXcHapXXSutbFXXX.jpg" alt="">
                        </a>
                    </div>
                    <button class="iconfont leftBtn">&#xe65c;</button>
                    <button class="iconfont rightBtn">&#xe65f;</button>

                </div>
                <div class="ad fr">
                    <p class="title">今日热卖</p>
                    <a href="#">
                        <img src="https://aecpm.alicdn.com/simba/img/TB1j4LLKpXXXXcbaXXXSutbFXXX.jpg" alt="">
                    </a>
                </div>
            </div>

        </div>

        <!-- 右边的内容 -->
        <div class="firstRight fr">
            <!-- 用户 -->
            <div class="user">
                <a href="#" class="avatar"><img
                        src="https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_50x50.jpg" alt=""></a>
                <p class="username">Hi! 你好</p>
                <p class="members">
                    <a href="#" class="gold">领淘金币抵钱</a>
                    <a href="#" class="club">会员俱乐部</a>
                </p>
                <div class="btn">
                    <button class="login">登录</button>
                    <button class="register">注册</button>
                    <button class="shop">开店</button>
                </div>
            </div>
            <!-- 广告区 -->
            <div class="AD">
                <a href="#" class="ad">
                    <img src="https://img.alicdn.com/tfs/TB1O2k_PAL0gK0jSZFAXXcA9pXa-540-120.jpg" alt="">
                </a>
            </div>

            <!-- 公告区 -->
            <div class="notice">
                <ul class="title">
                    <li class="active"><a href="#">公告</a></li>
                    <li><a href="#">规则</a></li>
                    <li><a href="#">论坛</a></li>
                    <li><a href="#">安全</a></li>
                    <li><a href="#">公益</a></li>
                </ul>
                <div class="notice-bd">
                    <ul class="content clearfix">
                        <li class="item1"><a href="#">
                                95公益周阿里、腾讯等六家公司同台联合做公
                            </a></li>
                    </ul>
                </div>

            </div>

            <!-- 图标区域 -->
            <table class="icon">
                <tr>
                    <td class="class1">
                        <a href="#">
                            <span></span>
                            <i>充话费</i>
                        </a>
                    </td>
                    <td class="class2">
                        <a href="#">
                            <span></span>
                            <i>旅行</i>
                        </a>
                    </td>
                    <td class="class3">
                        <a href="#">
                            <span></span>
                            <i>车险</i>
                        </a>
                    </td>
                    <td class="class4">
                        <a href="#">
                            <span></span>
                            <i>游戏</i>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td class="class5">
                        <a href="#">
                            <span></span>
                            <i>彩票</i>
                        </a>
                    </td>
                    <td class="class6">
                        <a href="#">
                            <span></span>
                            <i>电影</i>
                        </a>
                    </td>
                    <td class="class7">
                        <a href="#">
                            <span></span>
                            <i>酒店</i>
                        </a>
                    </td>
                    <td class="class8"><a href="#">
                            <span></span>
                            <i>理财</i>
                        </a>
                    </td>
                </tr>
            </table>

            <!-- APP -->
            <div class="app">
                <div class="title clearfix">
                    <h3 class="fl">阿里APP</h3>
                    <a href="#" class="fr">更多></a>
                </div>
                <ul class="appIcon">
                    <li class="item1">
                        <a href="#"><img src="images/app_1.png" alt=""></a></li>
                    <li class="item2">
                        <a href="#"><img src="images/app_2.png" alt=""></a></li>
                    <li class="item3">
                        <a href="#"><img src="images/app_3.png" alt=""></a></li>
                    <li class="item4">
                        <a href="#"><img src="images/app_4.png" alt=""></a></li>
                    <li class="item5">
                        <a href="#"><img src="images/app_5.png" alt=""></a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 有好货 -->
    <div id="firstLayer" class="layer clearfix mt10">
        <h3 class="goods-hd">
            <img src="https://img.alicdn.com/tfs/TB1tqpnegMPMeJjy1XcXXXpppXa-148-48.png" alt="" class="fl">
            <p>
                <span>与品质生活不期而遇</span>
            </p>
        </h3>
        <ul>
            <a href="#">
                <div class="img-warper">
                    <img src="https://img.alicdn.com/tfscom/i1/1581756766/TB2TF0ch0zJ8KJjSspkXXbF7VXa_!!1581756766.jpg_180x180xzq90.jpg_.webp"
                        alt="">
                </div>
                <div class="information">
                    <h4>大豆家 方头奶奶鞋</h4>
                    <p>一脚蹬设计，方便日常的穿脱。</p>
                    <p class="extra"><span class="iconfont">&#xe627;</span>
                        3758 人说好
                    </p>
                </div>
            </a>
            <a href="#">
                <div class="img-warper">
                    <img src="https://img.alicdn.com/tfscom/i3/2459354798/TB2IyE5eUhnpuFjSZFpXXcpuXXa_!!2459354798.jpg_180x180xzq90.jpg_.webp"
                        alt="">
                </div>
                <div class="information">
                    <h4>佳宝路转角水槽</h4>
                    <p>304不锈钢，表面光洁坚固耐用。</p>
                    <p class="extra"><span class="iconfont">&#xe627;</span>
                        122 人说好
                    </p>
                </div>
            </a>
            <a href="#">
                <div class="img-warper">
                    <img src="https://img.alicdn.com/tfscom/i4/654230132/O1CN011CqUjXBxyNTXTMy_!!654230132.jpg_180x180xzq90.jpg_.webp"
                        alt="">
                </div>
                <div class="information">
                    <h4>肖优秀真皮细高跟过膝瘦腿弹力靴</h4>
                    <p>细跟尖头设计更显优雅女人味。</p>
                    <p class="extra"><span class="iconfont">&#xe627;</span>
                        68 人说好
                    </p>
                </div>
            </a>
            <a href="#">
                <div class="img-warper">
                    <img src="https://img.alicdn.com/imgextra/i3/3778221387/TB2hRCYtyOYBuNjSsD4XXbSkFXa_!!3778221387-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp"
                        alt="">
                </div>
                <div class="information">
                    <h4>低热量保持好身材，来一块厚豆干</h4>
                    <p>低热量，鲜咸味，超饱腹，日常束身常备零食，代餐豆干。灞水优质矿泉水，秦岭山麓非转基因天然大豆。酸浆点制，豆浆自然发酵而成。</p>
                    <p class="extra"><span class="iconfont">&#xe627;</span>
                        41 人说好
                    </p>
                </div>
            </a>
            <a href="#">
                <div class="img-warper">
                    <img src="https://img.alicdn.com/imgextra/i4/111676913/TB2QvjxnN1YBuNjy1zcXXbNcXXa_!!111676913-2-beehive-scenes.png_180x180xzq90.jpg_.webp"
                        alt="">
                </div>
                <div class="information">
                    <h4>入户鞋底清洁神器，让地板一尘不染</h4>
                    <p>这款鞋底清洁神器，节能环保，简单方便，不用电。刷盘内只需加入稀释好的清洁剂或消毒液，使用时双脚踏上刷盘摩擦三到五次，在踏上吸水地垫，只需几秒钟即可清洁完成，让你家的地板时刻保持干净，从此再也不怕接待客人了！
                    </p>
                    <p class="extra"><span class="iconfont">&#xe627;</span>
                        92 人说好
                    </p>
                </div>
            </a>
            <a href="#">
                <div class="img-warper">
                    <img src="https://img.alicdn.com/tfscom/i2/682153619/TB2yBeNmXXXXXX6XXXXXXXXXXXX_!!682153619.jpg_180x180xzq90.jpg_.webp"
                        alt="">
                </div>
                <div class="information">
                    <h4>让人口味大开 盐城特产藕粉圆子</h4>
                    <p>民间独特风味的宫廷点心。</p>
                    <p class="extra"><span class="iconfont">&#xe627;</span>
                        18 人说好
                    </p>
                </div>
            </a>
        </ul>
    </div>

    <!-- 右侧固定定位导航 -->
    <div id="tool">
        <span class="iconfont">&#xe605;</span>
        <div class="btn">
            <a href="#" class="c4 active">品质 好货</a>
            <a href="#" class="c5">好店 直播</a>
            <a href="#" class="c6">实惠 热卖</a>
            <a href="#" class="c4">猜你 喜欢</a>
            <a href="#" class="item6">反馈</a>
            <a href="#">暴恐 举报</a>
        </div>
    </div>
</body>

</html>